<template>
	<view>
		<u-sticky h5-nav-height="0">
		<view class="tabs-box">
			<view class="tabs" :style="{'margin':'0 '+margin+'rpx'}">
				<u-tabs :list="tabList" :is-scroll="false" bar-width="70" active-color="#e41876" :current="currentTab" @change="changeTab"></u-tabs>
			</view>
		</view>
		</u-sticky>
		<view class="banner">
			<image :src=" baseUrl+configs.material_banner" mode="aspectFill"></image>
		</view>
		<view class="cate-list">
			<view class="item" :class="{'active':item.id == curCate}" @click="changeCate(item.id)"
			v-for="(item,index) in categoryList" :key="index">{{item.name}}</view>
		</view>
		<view class="material-list" v-if="currentTab != 2">
			<view class="item" v-for="(item,index) in materialList" :key="index">
				<view class="left">
					<view class="avatar">
						<image :src="item.user.avatar ? baseUrl+item.user.avatar : '/static/images/default-avatar.png'" mode="aspectFill"></image>
					</view>
				</view>
				<view class="right">
					<view class="nickname">{{item.user.nickname}}</view>
					<view class="content"><text>{{item.content}}</text></view>
					<view class="img-list" v-if="item.images.length > 0">
						<view class="img" :class="{'one':item.images.length == 1,'four':item.images.length == 4}" v-for="(img,i) in item.images" 
						:style="{'background-image': 'url('+baseUrl+img+')'}">
							<image v-if="item.price == 0 || item.is_buy" :src="baseUrl+img" @click="showImage(item.images,baseUrl+img)"
							 :mode="item.images.length == 1 ? 'widthFix' : 'aspectFill'"></image>
						</view>
					</view>
					<view class="video" v-if="item.video && item.type != 3">
						<video :poster="baseUrl+item.cover" :src="baseUrl+item.video"></video>
					</view>
					<view class="goods" v-if="item.video && item.type == 3">
						<view class="cover" @click="goVideoDetail(item.id)">
							<image :src="baseUrl+item.cover" mode="aspectFill"></image>
							<image src="../../../static/images/play.png" class="play"></image>
						</view>
						<view class="relation" v-if="item.goods_id">
							#{{item.goods.goods_name}}# <text>￥{{item.goods.shop_price}}</text>
	<!-- 						<view class="goods-img">
								<image :src="baseUrl+item.goods.goods_img" mode="aspectFill"></image>
							</view>
							<view class="goods-info">
								<view class="title u-line-1">{{item.goods.goods_name}}</view>
								<view class="price">￥{{item.goods.shop_price}}</view>
							</view> -->
						</view>
					</view>
					<view class="op" v-if="item.type == 3">
						<view class="copy" @click="copy(item)">
							<u-icon name="file-text" color="#999999" size="38"></u-icon>
							<text>复制文案</text>
						</view>
						<view class="download" @click="download(item)">
							<u-icon name="download" color="#999999" size="38"></u-icon>
							<text>下载素材</text>
						</view>
						<view class="collect" @click="collect(item)">
							<u-icon v-if="item.is_collect" name="star-fill" color="#fb4197" size="38"></u-icon>
							<u-icon v-else name="star" color="#999999" size="38"></u-icon>
							<text>收藏</text>
						</view>
					</view>
					<view class="op" v-else>
						<view class="copy" @click="copy(item)">
							<u-icon name="file-text" color="#999999" size="38"></u-icon>
							<text>复制文案</text>
						</view>
						<view class="download" @click="download(item)">
							<u-icon name="download" color="#999999" size="38"></u-icon>
							<text>下载素材</text>
						</view>
						<view class="collect" @click="collect(item)">
							<u-icon v-if="item.is_collect" name="star-fill" color="#fb4197" size="38"></u-icon>
							<u-icon v-else name="star" color="#999999" size="38"></u-icon>
							<text>收藏</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="video-list" v-else>
			<view class="item" v-for="(item,index) in materialList" :key="index">
				<view class="cover" @click="goVideoDetail(item.id)">
					<image :src="baseUrl+item.cover" mode="aspectFill"></image>
					<view class="play">
						<image src="../../../static/images/play.png"></image>
					</view>
				</view>
				<view class="bottom">
					<view class="user">
						<image :src="item.user.avatar ? baseUrl+item.user.avatar : '/static/images/default-avatar.png'" mode="aspectFill"></image>
						<text>{{item.user.nickname}}</text>
					</view>
					<view class="collect" @click="collect(item)">
						<u-icon v-if="item.is_collect" name="star-fill" color="#fb4197" size="38"></u-icon>
						<u-icon v-else name="star" color="#999999" size="38"></u-icon>
					</view>
				</view>
			</view>
		</view>
		<view class="create" @click="goRelease">
			<u-icon name="edit-pen-fill" color="#FFF" size="38"></u-icon>
			<text>创作</text>
		</view>
		<view class="my" @click="goCenter">
			<u-icon name="account-fill" color="#FFF" size="38"></u-icon>
			<text>我的</text>
		</view>
		<u-popup v-model="showPay" mode="center" width="90%" border-radius="14">
			<view class="pay-box">
				<view class="title">支付积分</view>
				<view class="con">
					<view class="content">您需要支付<text>{{parseFloat(selectItem.price)}}</text>积分解锁素材</view>
					<view class="content" v-if="action == 'copy'">支付后可继续复制文案</view>
					<!-- #ifdef H5 -->
					<view class="content" v-if="action == 'down' && selectItem.type == 1">支付后可长按保存素材图片</view>
					<view class="content" v-if="action == 'down' && selectItem.type == 2">>支付后可复制视频链接到浏览器下载</view>
					<!-- #endif -->
					<!-- #ifdef MP -->
					<view class="content" v-if="action == 'down'">支付后将自动下载素材文件</view>
					<!-- #endif -->
				</view>

				<view class="pay-op">
					<view class="cancel" @click="showPay = false">取消</view>
					<view class="pay" @click="pay()">立即支付</view>
				</view>
			</view>
		</u-popup>
		<q-previewImage ref="previewImage" :urls="imgs" @onLongpress="onLongpress"></q-previewImage>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				baseUrl: this.config.baseUrl,
				tabList: [{
					id:'',
					name: '推荐'
				}, {
					id:'collect',
					name: '收藏'
				}, {
					id:'video',
					name: '视频'
				}, {
					id:'yingxiao',
					name: '营销'
				}],
				currentTab: 0,
				margin:180,
				categoryList:[],
				curCate:0,
				materialList:[],
				where:{
					page:1,
					limit:10,
					cid:0,
					btype:''
				},
				configs:{},
				showPay:false,
				selectItem:{},
				action:'copy',
				imgs: [],
			}
		},
		onLoad() {
			this.getMaterialConfig()
			this.getCategoryList()
			this.getMaterialList()
		},
		onPullDownRefresh() {
			this.materialList = []
			this.where.page = 1
			this.getMaterialList()
		},
		onReachBottom() {
			this.where.page++
			this.getMaterialList()
		},
		methods: {
			changeTab(index) {
				this.currentTab = index;
				this.materialList = []
				this.where.page = 1
				this.where.btype = this.tabList[index].id
				this.getMaterialList()
			},
			getCategoryList(){
				this.$u.get('material/api.index/category').then(res => {
					this.categoryList = [{
						id:0,
						name:'全部'
					}]
					res.data.forEach(item => {
						this.categoryList.push({
							id:item.id,
							name:item.name
						})
						// if(item.is_rec){
						// 	this.tabList.push({
						// 		id:item.id,
						// 		name:item.name
						// 	})
						// }
					})
					this.setMargin()
				})
			},
			changeCate(id){
				this.curCate = id
				this.materialList = []
				this.where.page = 1
				this.where.cid = id
				this.getMaterialList()
			},
			getMaterialList(){
				this.$u.get('material/api.index/index',this.where).then(res => {
					this.materialList = this.materialList.concat(res.data)
					uni.stopPullDownRefresh()
				})
			},
			setMargin(){
				// if(this.tabList.length <= 3){
				// 	this.margin = 220
				// }else if(this.tabList.length == 4){
				// 	this.margin = 190
				// }else if(this.tabList.length == 5){
				// 	this.margin = 150
				// }else if(this.tabList.length == 6){
				// 	this.margin = 130
				// }else if(this.tabList.length == 7){
				// 	this.margin = 90
				// }else if(this.tabList.length > 7){
				// 	this.margin = 20
				// }
			},
			copy(item){
				let that = this
				if(Number(item.price) > 0 && !Number(item.is_buy)){
					this.showPay = true
					this.action = 'copy'
					this.selectItem = item
					return
				}
			    uni.setClipboardData({
					data: String(item.content), // 必须字符串
					success: function () {
						uni.showToast({
						    title: '复制成功',
						    icon: 'none'
						});
					}
				});
			},
			collect(item){
				this.$u.post('material/api.index/collect',{mid:item.id}).then(res => {
					item.is_collect = item.is_collect ? 0 : 1
					uni.showToast({
					    title: res.msg,
					    icon: 'none'
					});
				})
			},
			showImage(images,url){
				console.log(url,1)
				let image_list = []
				images.forEach(img => {
					image_list.push(this.baseUrl+img)
				})
				this.imgs = image_list
				// #ifdef MP-WEIXIN
				this.$nextTick(()=>{
					 this.$refs.previewImage.open(url); // 传入当前选中的图片地址(小程序必须添加$nextTick，解决组件首次加载无图)
				})
				// #endif
	
				// #ifndef MP-WEIXIN
				this.$refs.previewImage.open(url); // 传入当前选中的图片地址
				// #endif
				// console.log(index)
				// uni.previewImage({
				// 	current:index,
				// 	urls: image_list,
					
				// });
			},
			download(item){
				let that = this
				if(Number(item.price) > 0 && !Number(item.is_buy)){
					this.showPay = true
					this.action = 'down'
					this.selectItem = item
					return
				}
				let image_list = []
				item.images.forEach(img => {
					image_list.push(this.baseUrl+img)
				})
				// #ifdef H5
				const ua = window.navigator.userAgent.toLowerCase();
				if(item.type == 1){
					if(image_list.length == 0){
						return this.$u.toast('没有可下载的图片素材');
					}
					if (ua.match(/micromessenger/i) == 'micromessenger') {
						uni.showToast({
						    title: '请长按保存图片',
						    icon: 'none'
						});
						setTimeout(function(){
							that.imgs = image_list
							// #ifdef MP-WEIXIN
							that.$nextTick(()=>{
								 that.$refs.previewImage.open(image_list[0]); // 传入当前选中的图片地址(小程序必须添加$nextTick，解决组件首次加载无图)
							})
							// #endif
								
							// #ifndef MP-WEIXIN
							that.$refs.previewImage.open(image_list[0]); // 传入当前选中的图片地址
							// #endif
						},1500)
					}else{
						image_list.forEach(wimg => {
							uni.downloadFile({
								url: wimg,
								success: (res) => {
									if (res.statusCode === 200) {
										var oA = document.createElement("a");
											oA.download = ''; // 设置下载的文件名，默认是'下载'
											oA.href = res.tempFilePath; //临时路径再保存到本地
											document.body.appendChild(oA);
											oA.click();
											oA.remove(); // 下载之后把创建的元素删除
									}
								}
							});
						})
					}
				}
				if(item.type == 2 || item.type == 3){
					if (ua.match(/micromessenger/i) == 'micromessenger') {
						uni.setClipboardData({
							data: this.baseUrl+item.video,
							success: function () {
								uni.showToast({
									title: '视频链接已经复制，请前往浏览器下载视频',
									icon: 'none'
								});
							}
						});
					}else{
						uni.downloadFile({
							url: this.baseUrl+item.video,
							success: (res) => {
								if (res.statusCode === 200) {
									var oA = document.createElement("a");
										oA.download = ''; // 设置下载的文件名，默认是'下载'
										oA.href = res.tempFilePath; //临时路径再保存到本地
										document.body.appendChild(oA);
										oA.click();
										oA.remove(); // 下载之后把创建的元素删除
								}
							}
						});
					}
				}
				// #endif
				// #ifdef MP-WEIXIN
				if(item.type == 1){
					image_list.forEach(img => {
						uni.downloadFile({
							url:img,
							success: (res) => {
								if (res.statusCode === 200) {
									uni.saveImageToPhotosAlbum({
										filePath: res.tempFilePath,
										success: function () {
											uni.showToast({
												title: '请在手机相册查看下载的素材',
												icon: 'none'
											});
										}
									});
								}
							}
						});
					})
				}
				if(item.type == 2 || item.type == 3){
					uni.showLoading({
						title:'正在下载视频'
					})
					uni.downloadFile({
						url:this.baseUrl+item.video,
						success: (res) => {
							uni.hideLoading()
							uni.saveVideoToPhotosAlbum({
								filePath: res.tempFilePath,
								success: function () {
									uni.showToast({
										title: '请在手机相册查看下载的素材',
										icon: 'none'
									});
								}
							});
						},fail(err) {
							uni.hideLoading()
						}
					});
				}
				// #endif
			},
			goVideoDetail(id){
				// #ifdef H5
				window.location.href = '/pages/material/video/detail?id='+id
				// #endif
				// #ifndef H5
				uni.navigateTo({
					url:'/pages/material/video/detail?id='+id
				})
				// #endif
			},
			goRelease(){
				uni.navigateTo({
					url:'/pages/material/release/index'
				})
			},
			goCenter(){
				uni.navigateTo({
					url:'/pages/material/center/index'
				})
			},
			getMaterialConfig(){
				this.$u.get('material/api.index/config').then(res => {
					this.configs = res.data
				})
			},
			pay(){
				let that = this
				uni.showLoading({
					title:'支付中'
				})
				this.$u.post('material/api.index/pay',{id:this.selectItem.id}).then(res => {
					if(res.code == 1){
						that.$u.toast(res.msg);
						that.showPay = false
						setTimeout(function(){
							
							that.selectItem.is_buy = 1
							if(that.action == 'copy'){
								that.copy(that.selectItem)
							}
							if(that.action == 'down'){
								that.download(that.selectItem)
							}
						},1000)
						uni.hideLoading()
					}else{
						this.showPay = false
						uni.hideLoading()
					}
				}).catch(err=>{
					this.showPay = false
				})
			}
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #FFFFFF;
	}
	.tabs-box{
		background-color: #FFFFFF;
	}
	.tabs{
		// margin: 0 190rpx;
		
	}
	.banner{
		margin: 20rpx;
		image{
			width: 100%;
			height: 180rpx;
			border-radius: 15rpx;
		}
	}
	.cate-list{
		margin: 0 0rpx 0rpx 20rpx;
		display: flex;
		flex-wrap: wrap;
		justify-content:flex-start;
		.item{
			display: inline-block;
			background-color: #F1F1F1;
			font-size: 24rpx;
			color: #666666;
			padding: 10rpx 20rpx;
			border-radius: 10rpx;
			margin-right: 15rpx;
			margin-bottom: 15rpx;
		}
		.active{
			background-color: #c2dfec;
		}
	}
	.material-list{
		margin: 0rpx 20rpx 20rpx 20rpx;
		.item{
			display: flex;
			border-bottom: 1px solid #F1F1F1;
			padding-top: 20rpx;
			.left{
				width: 100rpx;
				.avatar{
					image{
						width: 80rpx;
						height: 80rpx;
						border-radius: 14rpx;
					}
				}
			}
			.right{
				width: 610rpx;
				.nickname{
					color: #16306d;
					font-size: 30rpx;
				}
				.content{
					margin-top: 12rpx;
					font-size: 26rpx;
					line-height: 42rpx;
				}
				.img-list{
					display: block;
					margin-top: 14rpx;
					.img{
						display: inline-block;
						width: 190rpx;
						height: 190rpx;
						// background-image: url(../../../static/public/images/bg_bubbles.png);
						background-position: center; /* 水平居中 */
					    background-size: 100% auto; /* 水平100%，垂直自动 */
					    background-repeat: no-repeat; /* 防止背景图像重复 */
						margin-right: 20rpx;
						margin-bottom: 10rpx;
						image{
							width: 190rpx;
							height: 190rpx;
						}
						&:nth-child(3n){
							margin-right: 0rpx;
						}
					}
					.one{
						width: 400rpx;
						height: auto;
						image{
							width: 400rpx;
							height: auto;
						}
						// height: 400rpx;
					}
					.four{
						margin-right: 20rpx;
						&:nth-child(2){
							margin-right: 190rpx;
						}
						&:nth-child(3){
							margin-right: 20rpx;
						}
					}
				}
				.video{
			
				}
				.goods{
					.cover{
						position: relative;
						image{
							width: 230rpx;
							height: 400rpx;
						}
						.play{
							position: absolute;
							top: 245rpx;
							left: 150rpx;
							width: 70rpx;
							height: 70rpx;
							z-index: 99;
						}
					}
					.relation{
						display: inline-block;
						margin-top: 10rpx;
						border: 1px solid #e1e1e1;
						padding: 10rpx;
						border-radius: 10rpx;
						// width: 610rpx;
						background-color: #edeff1;
						font-size: 24rpx;
						text{
							margin-left: 20rpx;
							color: #fb6c6c;
						}
						.goods-img{
							margin-right: 20rpx;
							image{
								width: 100rpx;
								height: 100rpx;
								border-radius: 6rpx;
							}
						}
						.goods-info{
							.title{
								width: 470rpx;
								font-size: 30rpx;
							}
							.price{
								color: #FF0000;
								margin-top: 10rpx;
							}
						}
					}
				}
				.op{
					display: flex;
					justify-content: space-between;
					font-size: 24rpx;
					color: #999;
					margin: 20rpx 0;
					text{
						position: relative;
						top: -2rpx;
						margin-left: 4rpx;
					}
				}
			}
		}
	}
	.video-list{
		margin: 0rpx 20rpx 20rpx 20rpx;
		display: flex;
		justify-content: flex-start;
		flex-wrap: wrap;
		.item{
			width: 48%;
			margin-right: 4%;
			position: relative;
			margin-bottom: 40rpx;
			&:nth-child(2n){
				margin-right:0;
			}
			.cover{
				position: relative;
				height: 350rpx;
				image{
					width: 100%;
					height: 350rpx;
					border-radius: 20rpx;
				}
				.play{
					position: absolute;
					top: 200rpx;
					left: 206rpx;
					z-index: 99;
					image{
						width: 70rpx;
						height: 70rpx;
					}
				}
			}
			.bottom{
				margin-top: 15rpx;
				display: flex;
				justify-content: space-between;
				.user{
					image{
						width: 45rpx;
						height: 45rpx;
						border-radius: 50%;
					}
					text{
						font-size: 28rpx;
						color: #666666;
						margin-left: 10rpx;
						position: relative;
						top: 4rpx;
					}
				}
			}
		}
	}
	.create{
		position: fixed;
		bottom: 20%;
		right: 20rpx;
		width: 110rpx;
		height: 110rpx;
		background: linear-gradient(to bottom, #FF0000 0%, #FF9900 100%);
		border-radius: 50%;
		color: #FFFFFF;
		text-align: center;
		padding-top: 20rpx;
		z-index: 999;
		text{
			display: block;
			font-size: 26rpx;
		}
	}
	.my{
		position: fixed;
		bottom: 10%;
		right: 20rpx;
		width: 110rpx;
		height: 110rpx;
		background: linear-gradient(to bottom, #a606b9 0%, #e41876 100%);
		border-radius: 50%;
		color: #FFFFFF;
		text-align: center;
		padding-top: 20rpx;
		z-index: 999;
		text{
			display: block;
			font-size: 26rpx;
		}
	}
	.pay-box{
		.title{
			text-align: center;
			padding: 20rpx;
			border-bottom: 1px solid #e1e1e1;
		}
		.con{
			text-align: center;
			margin: 60rpx 30rpx;
			.content{
				color: #666666;
				text{
					color:#e41876;
					font-size: 36rpx;
					font-weight: bold;
				}
			}
		}

		.pay-op{
			display: flex;
			height: 90rpx;
			line-height: 90rpx;
			text-align: center;
			border-top: 1px solid #e1e1e1;
			.cancel{
				width: 50%;
				color: #666666;
			}
			.pay{
				width: 50%;
				color: #e41876;
				font-weight: bold;
				border-left: 1px solid #e1e1e1;
			}
		}
	}
</style>
